<template>
    <div id="app">
        <Head>项目经历</Head>
        <div class="line">
            <div class="title">项目名称</div>
            <input placeholder="请填写名称" v-model="sub.name"/>
        </div>
        <div class="line">
            <div class="title">项目时间</div>
            <div class="date">
                <div :class="sub.startime?'sel':''" @click="starshow=true">{{sub.startime?sub.startime:'开始时间'}}</div>
                <div class="sel">&nbsp;—&nbsp;</div>
                <div :class="sub.endtime?'sel':''" @click="endshow=true">{{sub.endtime?sub.endtime:'结束时间'}}</div>
            </div>
        </div>
        <div class="protitle">项目内容</div>
        <textarea v-model="sub.message" placeholder="请填写项目内容" maxlength="300"></textarea>
        <div class="wordnum">{{sub.message.length}}/300</div>
        <div class="btn" @click="save">保&nbsp;&nbsp;存</div>

        <van-popup v-model="starshow" round position="bottom" class="popup" >
            <van-datetime-picker
            type="date"
            title="开始时间"
            :min-date="minDate"
            :formatter="formatterDate"
            @confirm="stardate"
            @cancel="starshow = false"
            />
        </van-popup>
        <van-popup v-model="endshow" round position="bottom" class="popup" >
            <van-datetime-picker
            type="date"
            title="结束时间"
            :min-date="minDate"
            :formatter="formatterDate"
            @confirm="enddate"
            @cancel="endshow = false"
            />
        </van-popup>
    </div>
</template>
<script>
import http from '@/utils/http'
import api from '@/api'
export default {
  components: {
  },
  data () {
    return {
      minDate: new Date(),
      starshow: false,
      endshow: false,
      sub: {
        id: '',
        name: '',
        startime: '',
        endtime: '',
        message: ''
      }
    }
  },
  created () {
    if (this.$route.query.id && this.$route.query.id != 'null') {
      this.sub.id = this.$route.query.id
    }
    // 请求数据
    this.fetchData()
  },
  methods: {
    formatterDate (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return `${val}日`
      }
      return val
    },
    stardate (e) {
      let d = new Date(e)
      this.sub.startime =
                d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      this.starshow = false
    },
    enddate (e) {
      let d = new Date(e)
      this.sub.endtime =
                d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      this.endshow = false
    },
    fetchData () {
      http.get(api.get_item, {id: this.sub.id, type: 2})
        .then(res => {
          this.sub.name = res.data.name
          this.sub.startime = res.data.startdate
          this.sub.endtime = res.data.enddate
          this.sub.message = res.data.description
        }).catch(() => {})
    },
    save () {
      if (!this.sub.name) {
        this.$notify('请填写名称')
        return false
      }
      if (!this.sub.startime) {
        this.$notify('请选择开始时间')
        return false
      }
      if (!this.sub.endtime) {
        this.$notify('请选择结束时间')
        return false
      }
      if (!this.sub.message) {
        this.$notify('请填写项目内容')
        return false
      }
      http
        .post(api.save_project, {
          id: this.sub.id,
          name: this.sub.name,
          startdate: this.sub.startime,
          enddate: this.sub.endtime,
          description: this.sub.message
        })
        .then(res => {
          if (parseInt(res.code) === 200) {
            this.$notify({ type: 'success', message: res.message })
            this.$router.push({ path: '/freelance/experience' })
          } else {
            this.$notify(res.message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.line{
    height: 60px;
    background-color: #ffffff;
    border-left: 18px solid #ffffff;
    border-right: 18px solid #ffffff;
    border-bottom: 1px solid #f2f2f2;
    display: flex;
    align-items: center;
    position: relative;
    .title{
        line-height: 1;
        font-size: 15px;
        color: #2a3140;
        position: relative;
    }
    input{
        width: calc(100vw - 120px);
        text-align: right;
        position: absolute;
        right: 0px;
        color: #2a3140;
        font-size: 15px;
        border:none;
        outline: none;
        padding: 0px;
        margin: 0px;
        text-align: right;
    }
    input::-webkit-input-placeholder {
        color: #c4c7cd;
    }
    .date{
        position: absolute;
        right: 0px;
        display: flex;
        align-items: center;
        font-size: 15px;
        color: #c4c7cd;
        .sel{
            color: #2a3140;
        }
    }
}
.protitle{
    margin-top: 32px;
    margin-left: 18px;
    margin-bottom: 20px;
    line-height: 1;
    font-size: 15px;
    color: #2a3140;
}
textarea{
    width: calc(100vw - 36px);
    height: 124px;
    line-height: 2;
    margin-left: 18px;
    resize: none;
    border-radius: 5px;
    border: 1px solid #f5f5f5;
    box-shadow: 0px 0px 5px rgba($color: #ccc, $alpha: 0.3);
    font-size: 12px;
    padding: 12px 13px 12px 13px;
    color: #2a3140;
}
textarea::-webkit-input-placeholder {
    color: #d8d8d8;
}
.wordnum{
    margin-top: 15px;
    line-height: 1;
    position: absolute;
    right: 24px;
    font-size: 13px;
    color: #555555;
}
.btn{
    margin-top: 92px;
    margin-left: 21px;
    width: calc(100vw - 42px);
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #464646;
    border-radius: 50px;
    background-color: #fed700;
    box-shadow: 0px 1px 7px rgba($color: #fed700, $alpha: 0.8);
}
</style>
